<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Submit and Clear Data</title>
  <style>
    /* Define the animation */
    @keyframes submitAnimation {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }

    /* Apply animation to the submitted message */
    .submitted-message {
      display: none;
      animation: submitAnimation 1s ease-in-out;
    }
  </style>
</head>
<body>
  <h1>Submit and Clear Data Example</h1>

  <form id="myForm" action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br><br>

    <button type="submit" id="submitButton">Submit</button>
    <button type="button" onclick="clearForm()">Clear</button>
  </form>

  <!-- Submitted message container -->
  <div id="submittedMessage" class="submitted-message">Form submitted!</div>

  <script>
    function clearForm() {
      document.getElementById("myForm").reset();
    }

    // Adding an event listener to the form submission
    document.getElementById("myForm").addEventListener("submit", function(event) {
      // Prevent the default form submission behavior
      event.preventDefault();

      // Show the submitted message
      var submittedMessage = document.getElementById("submittedMessage");
      submittedMessage.style.display = "block";

      // Hide the message after a delay (e.g., 3 seconds)
      setTimeout(function() {
        submittedMessage.style.display = "none";
      }, 3000);

      // Optional: You can submit the form using AJAX if needed
      // Here you can add AJAX code to submit the form data asynchronously
    });
  </script>
</body>
</html>
